<template>
  <el-dialog
    :width="600"
    v-model="formVisible"
    title="抽检人员选择"
    @close="formCancel"
  >
    <div class="search">
      <el-input
        v-model="formVisible"
        style="width: 100%"
        placeholder="请输入人员姓名"
        :suffix-icon="Search"
      />
    </div>
    <div class="table">
      <el-table :data="tableData">
        <el-table-column prop="date" label="姓名" width="150" />
        <el-table-column prop="name" label="单位" />
        <el-table-column prop="state" label="部门职务" />
        <el-table-column prop="city" label="操作" width="80">
          <el-checkbox v-model="formVisible" />
        </el-table-column>
      </el-table>
    </div>
    <div class="content">
      <div class="content-label">已选</div>
      <div class="content-list">
        <div class="content-list-item" v-for="it in 7">
          <span>name</span>
          <el-icon color="#999999"><Close /></el-icon>
        </div>
      </div>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Search, Close } from '@element-plus/icons-vue'
const formVisible = ref(false)

const formCancel = () => {
  formVisible.value = false
}

const show = () => {
  formVisible.value = true
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]
defineExpose({ show })
</script>

<style scoped lang="scss">
.search {
  display: flex;
  justify-content: space-between;
}
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}
.select {
  width: 480px;
}
.search {
  margin-bottom: 20px;
}
.content {
  padding-top: 20px;
  width: 100%;
  display: flex;
  .content-label {
    width: 32px;
    height: 36px;
    padding-right: 20px;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    display: inline-flex;
    align-items: center;
  }
  .content-list {
    flex: 1;
    .content-list-item {
      background: #E8F3FF;
      border-radius: 0px 0px 0px 0px;
      padding: 8px 10px;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      display: inline-flex;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 10px;
      span {
        margin-right: 10px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
